<template>
  <div class="hotel-room-action">
    <hotel-room-filter v-model="roomState" />
    <div class="hotel-room-scroller">
      <div v-for="(item, index) in hotelRoomList" :key="index">
        <div class="hotel-room-yard_name">{{ item.yard_name }} {{ item.room_num }}间</div>
        <a-row :gutter="10">
          <a-col :span="8" v-for="room in item.room_list" :key="room.room_id" style="margin-bottom: 10px">
            <corner-border-box>
              <div style="padding: 15px">
                <text-row-tight label="房间地址" :ellipsis="true" :text="room.room_full_name"></text-row-tight>
                <text-row-tight label="房间描述" :ellipsis="true" :text="room.room_describe"></text-row-tight>
                <text-row-tight label="房间码" :text="room.room_code"></text-row-tight>
                <text-row-tight
                  label="当前入住人数"
                  :text="`${room.people_num}/${room.people_num_max}`"
                ></text-row-tight>
                <text-row-tight label="房间数量" :text="room.separate_room_num"></text-row-tight>
                <div style="text-align: right; margin-bottom: 10px">
                  <a-button size="small" @click="edit(room)">编辑</a-button>
                  <a-button v-if="room.status" size="small" @click="lockState(room)">锁定</a-button>
                  <a-button v-else size="small" @click="lockState(room)">解锁</a-button>
                </div>
                <a-row style="color: rgba(119, 215, 219, 1)">
                  <a-col :span="8" style="text-align: left" @click="showInfo(room)">
                    <span style="cursor: pointer">产权人信息</span>
                  </a-col>
                  <a-col :span="11" style="text-align: center" @click="historyCheckInRecord(room)">
                    <span style="cursor: pointer">历史入住记录</span>
                  </a-col>
                  <a-col :span="5" style="color: rgba(255, 83, 30, 1); text-align: right" @click="del(room)">
                    <span style="cursor: pointer">删除</span>
                  </a-col>
                </a-row>
              </div>
            </corner-border-box>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script lang="jsx">
import merge from 'lodash-es/merge.js';
import { homestayWarningHotelList, homestayWarningRoomDel } from '@gis/lib/api';
import HotelRoomFilter from '@/views/homestay-warning/components/homestay-detail/hotel-room/hotel-room-filter';
import CornerBorderBox from '../../../../components/corner-border-box.vue';
import { dialog } from '@gis/lib/components/antd-dialog';
import { openPeopleDetailsDialog } from '../../../reality-people/people-details/peopleDetailsDialog.js';
export default {
  name: 'hotel-room-action',
  components: { CornerBorderBox, HotelRoomFilter },
  props: {
    details: { type: Object, default: () => {} },
  },
  data() {
    return {
      roomState: { state: undefined },
      hotelRoomList: [],
    };
  },
  computed: {
    apiParams() {
      return merge({}, { hotel_id: this.details.hotel_id, state: this.roomState.state });
    },
  },
  watch: {
    apiParams: {
      immediate: true,
      deep: true,
      handler() {
        this.getHotelRoomList();
      },
    },
  },
  methods: {
    del(room) {
      this.$confirm({
        content: <p style="color:#fff;">是否删除房间？删除后，数据无法恢复！</p>,
        centered: true,
        cancelText: '取消',
        okText: '确定',
        onOk: async () => {
          this.handleCommonResult(await homestayWarningRoomDel({ room_id: room.room_id }), {
            onOk: () => this.getHotelRoomList(),
          });
        },
      });
    },
    showInfo(room) {
      if (!room || !room.owner_id) {
        this.$message.error('暂无产权信息!');
        return;
      }
      openPeopleDetailsDialog({ people_id: room.owner_id });
    },
    historyCheckInRecord(room) {
      dialog({
        content: () =>
          import('@/views/homestay-warning/components/homestay-detail/hotel-room/history-check-record.vue'),
        contentProps: {
          details: room,
          style: { padding: '15px' },
        },
        dialogProps: {
          title: '历史入住记录',
          footer: null,
        },
      });
    },
    edit(room = {}) {
      dialog({
        content: () => import('./edit-room-info.vue'),
        contentProps: {
          data: room,
        },
        contentEvents: {
          onSuccess: () => {
            this.getHotelRoomList();
          },
        },
        dialogProps: {
          title: '修改房间信息',
          footer: null,
        },
      });
    },
    lockState(room) {
      dialog({
        content: () => import('./lock-state.vue'),
        contentProps: {
          room: room,
        },
        contentEvents: {
          lockSuccess: () => {
            this.getHotelRoomList();
          },
        },
        dialogProps: {
          title: `${room.status ? '锁定' : '解锁'}提示`,
        },
      });
    },
    async getHotelRoomList() {
      if (!this.apiParams.hotel_id) return;
      const { data = [] } = await homestayWarningHotelList(this.apiParams);
      this.hotelRoomList = data;
    },
  },
};
</script>

<style scoped lang="less">
.hotel-room-action {
  padding: 15px;
  .hotel-room-scroller {
    height: calc(100% - 40px);
    overflow: hidden auto;
  }
  .hotel-room-yard_name {
    font-size: 18px;
    font-weight: bold;
    color: #77d7db;
    padding: 10px 0;
  }
}
</style>
